<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="keywords" content="首页" />
    <meta name="description" content="首页" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/swiper.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/index.css}">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">

    <style>
        * {
            box-sizing: border-box;
        }
        .index .top {
            bottom: 0;
        }
        .index .tabul {
            position: absolute;
            top: 90px;
            height: auto;
            overflow: auto;
            margin-top: 0;
            /*padding-top: 91px;*/
            bottom: 50px;
            width: 100%;
            background-color: #f0f0f0;
            z-index: 11;
        }
        .index .bannerimg {
            margin-top: 0;
        }
        .main_con {
            height: 100%;
        }

        .index .banner .swiper-container .active span {
            display: inline-block;
            height: 45px;
            /*color: #f70029;*/
            /*border-bottom: 2px solid #f70029;*/
            color: #323232;
            border-bottom: none;
        }
        .duihuan{
            display: inline-block;
            height: 45px;
            color: #f70029;
        }
        .index .tabul .goodscon li {
            /*margin-bottom: 10px*/
        }
        .index .tabul .goodscon li a>span {
            background-color: #fff;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            height: 9rem;
        }
        .index .tabul .goodscon li a>div p:first-of-type {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: auto;
        }
    </style>




</head>
<body>
<div class="main index">
    <div class="main_con">
        <div class="top bgfff">
            <!--搜索框-->
            <div class="search flex flex-ac">
                <a class="rela" href="/wap/getSysMessage">
                    <img class="w100  message" th:src="@{/shoppingApi/images/mess.png}">
                    <span class="abs num message-count"></span>
                </a>
                <div class="it1">
                    <a th:href="@{/wap/search}" class="flex flex-ac db">
                        <img th:src="@{/shoppingApi/images/search.png}">
                        <input class="it1" type="text" placeholder="请输入关键词">
                    </a>
                </div>
            </div>
            <!--导航栏-->
            <div class="banner pl15 pr15">
                <div class="swiper-container ftc ft14 c323232">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href="/wap/productIndex" class="lingshouzhuanqu">零售专区</a></div>
                        <div class="swiper-slide active"><a href="/wap/openDuiHuan?pageNum=1&sign=5" class="duihuan">兑换专区</a></div>
                        <div class="swiper-slide"><a href="/wap/openTiYan?pageNum=1&sign=3" class="tiyan">体验专区</a></div>
                        <div class="swiper-slide"><a th:href="@{'/wap/openHuoDong?sign=7'}" class="huodong">活动专区</a></div>
                        <!--<div class="swiper-slide"><a href="javascript:alert('敬请期待')" class="huodong">活动专区</a>-->
                    </div>
                </div>
            </div>
        </div>

        <!--导航分类2  -->
        <div class="tabul  duihuan "  >
            <ul class="goodscon  page-info" style="padding-top: 5px;background-color: #f0f0f0">
                <li th:each="indexProduct:${map.indexProductList}">
                    <a th:href="${'/wap/getDetails?productId='+indexProduct.productId}" class="db  duihuan-product">
                        <span><img class="w100 priceData-img" th:if="${indexProduct!=null}" th:attr="src=@{${'http://xlspic.ycsqd.com'+indexProduct.proImg}}" ></span>
                        <div class="bgfff pt5 pl10 pb15">
                            <p class="ft14 c323232"th:text="${indexProduct.productDesc}"></p>
                            <p class="cf70029 mt5">
                                <span class="ft14">￥</span><span class="ft17 mr10" th:text="${#numbers.formatDecimal(indexProduct.proPrice,1,2)}"></span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>

            <!--兑换专区 滑动加载-->
            <!--<div class="weui-loadmore  ">-->
                <!--<i class="weui-loading "></i>-->
                <!--<span class="weui-loadmore__tips  c323232">正在加载</span>-->
                <!--<input type="hidden" class="pageNum" name="pageNum" value="0">-->
            <!--</div>-->
        </div>

        <!--分享弹窗-->
        <div class="window_alert" style="display: none">
            <div class="window_con bgfff ftc pt15">
                <p class="ft17 cff0000 mb15">赚<label>3.45</label></p>
                <p class="ft14 c323232 pl15 pr15">1.只要你的好友通过你的链接购买此商品，你就能赚到至少<span class="cf70029">3.45</span>元利润（可提现哦）</p>
                <p class="flex mt20 mb20 flex-ac pl15 pr15">
                    <span class="ml20 mr20 it1 lineh1"></span>
                    <span class="ft14 c323232">分享到</span>
                    <span class="ml20 mr20 it1 lineh1"></span>
                </p>
                <ul class="overflow ft14 c323232 ftc">
                    <li>
                        <img th:src="@{/shoppingApi/images/share1.png}">
                        <p class="mt10" onclick="wxHaoYou()">微信好友</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share2.png}">
                        <p class="mt10" onclick="PengYouJuan()">朋友圈</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share3.png}">
                        <p class="mt10">QQ好友</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share4.png}">
                        <p class="mt10">生成二维码</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share5.png}">
                        <p class="mt10">复制链接</p>
                    </li>
                </ul>
                <img class="close" th:src="@{/shoppingApi/images/close3.png}">
            </div>
        </div>
        <span class="back-top"></span>
        <div class="fixedBox50">
            <ul class="fixed-bottom bottom flex flex-pc ftc bgfff nft10 c323232">
                <li class="it1 active">
                    <a class="db" >
                        <span class="img"></span>
                        <span>首页</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/selectProductYJAndRjClassfy}" class="db">
                        <span class="img"></span>
                        <span>分类</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/getCartList}" class="db">
                        <span class="img"></span>
                        <span>购物车</span>
                    </a>
                </li>
                <li class="it1">

                    <a th:href="@{/wap/openUserCenter}" class="db">
                        <span class="img"></span>
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<!--<script type="application/javascript" th:src="@{/shoppingApi/js/swiper.min.js}"></script>-->
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>


<script type="text/javascript" >
    $(function () {


        /*回到顶部*/
        $(".back-top").on('click',function () {
            $(".main").animate({
                scrollTop: 0
            }, 1000)
        })
        // var mySwiper = new Swiper('.banner .swiper-container', {
        //     slidesPerView : 4,
        //     spaceBetween : 30,
        //     observer:true,
        //     observeParents:true,
        //     on:{
        //         click: function(){
        //             var clickedIndex= this.clickedIndex;
        //             this.slideTo(clickedIndex, 1000, true);
        //             if(!$(".banner .swiper-slide").eq(clickedIndex).hasClass('active')){
        //                 $(".banner .swiper-slide").eq(clickedIndex).siblings().removeClass('active');
        //                 $(".banner .swiper-slide").eq(clickedIndex).addClass('active');
        //                 $(".main_con .tabul").eq(clickedIndex).siblings(".tabul").addClass("hide");
        //                 $(".main_con .tabul").eq(clickedIndex).removeClass("hide");
        //             }
        //         }
        //     }
        // })


    /*兑换专区加载数据*/
//         infinite();
//         var str="";
//         var sign=5;
//         var pageNum=0;
//         var loading = false;  //状态标记
// function infinite() {
//             $('.tabul').infinite(100).on("infinite", function () {
//                 if (loading) return;
//                 loading = true;
//                 pageNum=pageNum+1;
//                 $.ajax({
//                     type:'post',
//                     url:'/wap/getLoadData',
//                     data:{
//                         'pageNum':pageNum,
//                         'sign':sign
//                     },
//                     success:function (result) {
//                         if(result.proPriceList==null){
//                             loading=true;
//                             $('.tabul').destroyInfinite();
//                             $('.weui-loadmore').hide();
//                             $('.duihuan').append("<p style='font-size: 12px;text-align: center' class='c323232'>没有更多了</p>");
//                         }else{
//                             getDuiHuanData(result.priceDataList);
//                             loading=false;
//                             // $('.tabul').destroyInfinite();
//                             $('.pageNum').val(pageNum);
//                             $('.weui-loadmore').hide();
//                         }
//                     },
//                     beforeSend : function(xhr) {
//                         xhr.setRequestHeader(header, token);
//                     }
//                 })
//
//                 // loading = false;
//                 //模拟延迟
//             });
//         }



        /*兑换专区数据*/
         // function getDuiHuanData(duiHuanData) {
         //     $.each(duiHuanData,function (i,item) {
         //         str="<li >\n" +
         //             "                    <a href='/wap/getDetails?productId="+item.productId+"' class='db duihuan-product'>\n" +
         //             "                        <img class=\"w100\" src='"+item.proImg+"'>\n" +
         //             "                        <div class=\"bgfff pt15 pl15 pb15\">\n" +
         //             "                            <p class=\"ft14 c323232 pover2\" >"+item.productDesc+ "</p>\n" +
         //             "                            <p class=\"cf70029 mt10\">\n" +
         //             "                                <span class=\"ft14\">￥</span><span class=\"ft17 mr10\" >"+item.proPrice.toFixed(2)+ "</span><span class=\"ft10 c969696\">已售出2810件</span>\n" +
         //             "                            </p>\n" +
         //             "                        </div>\n" +
         //             "                    </a>\n" +
         //             "                </li>";
         //     })
         //     $('.page-info').append(str);
         // }

        //首页消息显示条数
        $(function () {
            $.ajax({
                url:'/wap/getAllMessages',
                success:function (result) {
                    console.log(result);
                    $('.message-count').html(result.allMessageSize);
                }
            })
        })

        /*进入消息页面*/
        $('.message').on('click',function () {
            window.location.href="/wap/getSysMessage";
        })
    })

</script>
</html>
